<template>
  <div class="commentWrapper">
    <!-- <Parent :parentData="commentData.parent" v-if="commentData.parent" /> -->
    <div class="info">
      <img
        v-if="commentData.head_img"
        :src="$axios.default.baseURL+commentData.head_img"
        alt
        class="avatar"
      />
      <img v-else src="@/assets/logo.png" alt class="avatar" />
      <div class="userInfo">
        <div class="name">{{commentData.user.nickname}}</div>
        <div class="data">2个小时以前</div>
      </div>
      <div class="btnReplay" @click="callReply">回复</div>
    </div>
    <Parent
      :parentData="commentData.parent"
      v-if="commentData.parent"
      @parentCallReply="parentCallReply"
      :level="parentDepth"
    />
    <div class="mainComment">{{commentData.content}}</div>
  </div>
</template>

<script>
import Parent from "@/components/comment/Parent";
export default {
  components: {
    Parent
  },
  props: ["commentData"],
  computed: {
    //计算属性,楼层深度
    parentDepth() {
      return this.diguiParent(this.commentData.parent, 0);
    }
  },
  methods: {
    diguiParent(parentData, currentDepth) {
      if (parentData) {
        return this.diguiParent(parentData.parent, currentDepth + 1);
      } else {
        return currentDepth;
      }
    },
    callReply() {
      this.$emit("callReply", this.commentData.id);
    },
    parentCallReply(parentId) {
      this.$emit("callReply", parentId);
    }
  }
};
</script>

<style lang='less' scoped>
.commentWrapper {
  padding: 6.667vw;
  border-bottom: 1px solid #e4e4e4;
  .info {
    display: flex;
    align-items: center;
    margin-bottom: 3.333vw;
    .avatar {
      width: 9.722vw;
      height: 9.722vw;
      border-radius: 5vw;
    }
  }
  .userInfo {
    flex: 1;
    padding-left: 2.778vw;
    .name {
      font-size: 4.444vw;
    }
    .data {
      font-size: 3.333vw;
      color: #888;
    }
  }
  .btnReplay {
    font-size: 3.333vw;
    color: #666;
  }
  .mainComment {
    margin-top: 3.333vw;
  }
}
</style>